    <section class="banners cf">
        <div id="container-banners">  
            <div id="banner-cams">
                <div class="banner-icon">
                    <div id="cam"></div>
                </div>
                <div class="banner-content">
                    <h3 id="web-cams-heading"><?php echo $webcam_title;?></h3>
                    <p id="web-cams-value">
                    	<a href="http://alpinborovets.com/info/livecam/" target="_blank"><?php echo $borovets;?></a>, 
						<a href="http://www.webcambg.com/bansko02.html" target="_blank"><?php echo $bansko;?></a>, 
						<a href="http://www.webcambg.com/aleko.html" target="_blank"><?php echo $vitosha;?></a>
                    </p>
                </div>
            </div> <!--# web cams-->
            <div id="banner-weather">
                <div class="banner-icon">
                    <div id="cloud"></div>
                </div>
                <div class="banner-content">
                    <h3 id="weather-heading"><?php echo $whether_title;?></h3>
                    <ul id="carousel-weather">
                        <li id="wc1" data-title="42.269127, 23.605944" data-role="http://www.stringmeteo.com/stations/borovets/index.html"><?php echo $borovets;?></li>
                        <li id="wc2" data-title="Bansko, Bulgaria" data-role="http://www.webcambg.com/bansko02.html"><?php echo $bansko;?></li>
                        <li id="wc3" data-title="41.656572, 24.694980" data-role="#"><?php echo $pamporovo;?></li>
                        <li id="wc4" data-title="42.590410, 23.291922" data-role="http://www.webcambg.com/aleko.html"><?php echo $vitosha;?></li>
                        
                    </ul>
                </div>
            </div> <!--# weather-->
            <div id="banner-news">
                <div class="banner-icon">
                    <div id="news"></div>
                </div>
                <div class="banner-content">
                    <h3 id="news-heading"><?php echo $news_title;?></h3>
                    <ul id="carousel-news">
                    <?php foreach($news as $new) {?>
                        <li><a href="<?php  echo $new['href']?>" ><?php  echo $new['name']?></a></li>
                        
                     <?php }?>
                    </ul>
                </div>
            </div> <!--# news-->
        </div> <!--# container banners--> 
        <div id="container-forecast">
            <div id="forecast">
                
            </div> <!--# forecast-->
        </div> <!--# container forecast-->
    </section> <!--# banners-->
	<script>
			
	$(document).ready(function() {
        var starttab = window.location.hash;

        $(".tabs").carouFredSel({
            circular: false,
            width: "100%",
            responsive: true,
            items : {
//                height          : 304
            },
            scroll: {
                items           : 1,
                duration        : 800,                         
                pauseOnHover    : true
            },
            pagination: {
                container: '.tab-links',
                anchorBuilder: function( nr ) {
                    return '<li><a href="#"><span>' + $(this).attr('data-title') + '</span></a></li>';
                }
            }
        });

        $('#carousel-brand').carouFredSel({
            responsive: true,
            items : {
                visible         : { 
                    max: 6,
                    min: 1,
                },
                width           : 150,
                height          : 150
            },
            direction           : 'left',
            scroll : {
                items           : 1,
                duration        : 800,                         
                pauseOnHover    : true
            },
            prev: {
                button          : $('#prev-button'),
                key             : 'left'
            },
            next: {
                button          : $('#next-button'),
                key             : 'right'
            }
        });

        $('#carousel-weather').carouFredSel({
            items : {
                visible         : 1,
                width           : 220
            },
            direction           : 'up',
            scroll : {
                items           : 1,
                easing          : 'linear',
                duration        : 800,                         
                pauseOnHover    : true
            },
            prev: {
                key             : 'left'
            },
            next: {
                key             : 'right'
            }
        });

        $('#carousel-news').carouFredSel({
            items : {
                visible         : 1,
                width           : 220
            },
            direction           : 'up',
            scroll : {
                items           : 1,
                easing          : 'linear',
                duration        : 800,                         
                pauseOnHover    : true
            },
            prev: {
                key             : 'left'
            },
            next: {
                key             : 'right'
            },
            auto: {
                delay: 300
            }
        });
    });
			
	$(document).ready(function() {
	 var json;
	 function wedherLoad(city,element,content){
			 $.ajax({
						type: 'GET',
						url: 'http://api.worldweatheronline.com/free/v1/weather.ashx?q='+city+'&format=json&num_of_days=1&key=d8783b288cfd1fb06e4909962c0e74c573b803d8',
						data: '',
						success: function(msg){
							
							var mess = '';
							var details = '';
							mess +=  (msg.data.current_condition[0]['temp_C']-3)+'&deg;, ';
							mess +=  '<?php echo $wind;?> '+(msg.data.current_condition[0]['windspeedKmph']*0.2778).toFixed(2)+'m/s';
							
							$("#"+element).append(' '+mess);
							
							details += '<div class="forecast-location">'
							details += '	<div class="forecast-top">'+content+'<span class="temp">'+(msg.data.current_condition[0]['temp_C']-3)+'&deg;</span>';
							
							if($('#'+element).attr('data-role')){
								
								details += ' <a href="'+$('#'+element).attr('data-role')+'" target="_blank" >(<?php echo $meteo_station ?>)</a> ';
							}
							details += '</div>';
							details += '	<div class="forecast-icon"><img src="'+msg.data.current_condition[0]['weatherIconUrl'][0]['value']+'" /></div> ';               
							details += '	<div class="forecast-right">';
							details += '		<div><?php echo $max;?> <span class="temp-high">'+(msg.data.weather[0]['tempMaxC']-3)+'&deg;</span></div>';
							details += '		<div><?php echo $min;?> <span class="temp-low">'+(msg.data.weather[0]['tempMinC']-3)+'&deg;</span></div>';
							details += '		<div><?php echo $wind;?> <span class="wind">'+(msg.data.current_condition[0]['windspeedKmph']*0.2778).toFixed(2)+'m/s</span></div>';
							details += ' </div>';
							details += '</div>';
							
							$("#forecast").append(details);
						},
						error: function(msg){
							
							$("#forecast").append('<center>Няма връзка със сървъра...</center>');
							
						}
				});
						
		
		 }
		 
		$( "#carousel-weather li" ).each(function() {
			wedherLoad($( this ).attr('data-title'),$( this ).attr('id'),$( this ).html());
		});				
	});	
</script> 